<!DOCTYPE html>
<html>
<head>
    <title>登录页面</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .login-container {
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-item {
            margin-bottom: 15px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .error-message {
            color: #f44336;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <h2>用户登录</h2>
            <div class="form-item">
                <label>用户名：</label>
                <input type="text" v-model="username" placeholder="请输入用户名">
            </div>
            <div class="form-item">
                <label>密码：</label>
                <input type="password" v-model="password" placeholder="请输入密码">
            </div>
            <button @click="handleLogin" :disabled="isLoading">
                {{ isLoading ? '登录中...' : '登录' }}
            </button>
            <div v-if="errorMessage" class="error-message">
                {{ errorMessage }}
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref } = Vue

        // 检查是否已登录
        if (localStorage.getItem('userInfo')) {
            window.location.href = '/welcome.html';
        }

        createApp({
            setup() {
                const username = ref('')
                const password = ref('')
                const isLoading = ref(false)
                const errorMessage = ref('')

                const handleLogin = async () => {
                    if (!username.value || !password.value) {
                        errorMessage.value = '请输入用户名和密码'
                        return
                    }

                    try {
                        isLoading.value = true
                        errorMessage.value = ''
                        
                        console.log('发送登录请求:', {
                            username: username.value,
                            password: password.value
                        });

                        const response = await fetch('http://localhost:18880/api/auth/login', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({
                                username: username.value,
                                password: password.value
                            })
                        })

                        const data = await response.json()
                        console.log('登录响应:', data);

                        if (response.ok && data.message === "Login successful") {  // 修改判断条件
                            console.log('登录成功，准备跳转');
                            // 保存用户信息和token
                            localStorage.setItem('userInfo', JSON.stringify({
                                username: data.user.username,
                                token: data.token
                            }))
                            // 跳转到欢迎页面
                            window.location.href = '/welcome.html'
                        } else {
                            console.log('登录失败:', data.message);
                            errorMessage.value = data.message || '登录失败'
                        }
                    } catch (error) {
                        console.error('登录错误:', error);
                        errorMessage.value = '登录失败：' + error.message
                    } finally {
                        isLoading.value = false
                    }
                }

                return {
                    username,
                    password,
                    isLoading,
                    errorMessage,
                    handleLogin
                }
            }
        }).mount('#app')
    </script>
</body>
</html> 